<template>
<view class="shoplist">
	<view class="topNav">
		<view class="item" @click="changeSele(0)" :class="{ active: sele == 0 }">可租借</view>
		<view class="item" @click="changeSele(1)" :class="{ active: sele == 1 }">绿黄宝可归还</view>
		<view class="item" @click="changeSele(2)" :class="{ active: sele == 2 }">白宝可归还</view>
	</view>
	<scroll-view v-if="shopList.length" scroll-y="true" lower-threshold="50" @scrolltolower="lower" style="width: 100%; height: calc(100% - 80upx);">
		<view class="shopbox" v-for="item in shopList" :key="item.shopId" @click="clickShop(item.shopId)">
			<view class="topItem">
				<image :src="item.shopPhotUrl || '/static/logo.png'" style="width: 110upx; height: 110upx;"></image>
				<view class="topRight">
					<view class="topRightFlex">
						<view style="font-size: 32upx; color: #000; font-weight: 600; height: 35upx; line-height: 35upx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.shopName}}</view>
						<view style="font-size: 18upx; color: #999;">{{item.lang}}</view>
					</view>
					<view style="font-size: 20upx; color: #cdcdcd; width: 100%; height: 30upx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.shopSite + item.shopSite}}</view>
					<view style="font-size: 24upx; color: #455354; width: 100%; line-height: 1.1;">营业时间: {{item.shopHours || '无'}}</view>
				</view>
			</view>
			<view style="width: calc( 100% + 20upx ); height: 2upx; background: #f3f4f4; position: relative; left: -10upx;"></view>
			<view style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-top: 10upx;">
				<view style="width: 80upx; height: 80upx; margin-left: 12upx; background-color: #ccc;">
					<image :src="`/static/${item.version}.png`" style="width: 80upx; height: 80upx;"></image>
				</view>
				<view style="font-size: 24upx; color: #333; margin-left: 22upx;">{{ item.ifBorrow !== 0 ? '不' : '' }}可租借</view>
				<view style="font-size: 24upx; color: #333; margin-left: 22upx;">{{ item.ifReturn !== 0 ? '不' : '' }}可归还</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</scroll-view>
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			sele: 0,
			shopList: [],
			status: 'more',
			page: 1,
			longitude: 0,
			latitude: 0,
		}
	},
	methods: {
		lower() {
			if(this.status != 'more') return ;
			this.status='loading';	
			let url = `ShopManageController/getNebrayShopList?longitude=${this.longitude}&latitude=${this.latitude}&page=${this.page}&size=30`;
			let version = [ '', 'v1', 'v2' ][this.sele];
			if (version) url = url + `&version=${version}`;
			uni.showLoading({ title: '加载中' });
			http.request({
				url,
				method: 'get',
				success: (res)=>{	
					console.log(res, '结果')
					let data = res.dataList || {};
					let list = data.list || [];
					if (list.length == 0) {
						this.status='noMore';
						return ;
					}
					list = list.filter(item => {
						if (this.sele == 0) {
							return item.ifBorrow == 0;
						} else {
							return item.ifReturn == 0;
						}
					});
					list.forEach(ele => { ele.lang=this.getFlatternDistance( this.latitude, this.longitude, ele.latitude, ele.longitude ); });
					this.shopList.push(...list);
					this.page++;
					if (this.shopList.length < 5) {
						this.status='more';
						this.lower();
						return ;
					}
					if (data.isLastPage) {
						this.status='noMore';						
					} else {						
						this.status='more';
					}
					uni.hideLoading();
				},
				fail: () => uni.hideLoading()
			});
		},
		getRad(d){ let PI = Math.PI; return d*PI/180.0; },
		getFlatternDistance(lat1,lng1,lat2,lng2){
			let EARTH_RADIUS = 6378137.0;
			var radLat1 = this.getRad(lat1);
			var radLat2 = this.getRad(lat2);
			var a = radLat1 - radLat2;
			var b = this.getRad(lng1) - this.getRad(lng2);
			var s = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
			s = s*EARTH_RADIUS;
			s = Math.round(s*10000)/10000.0;
			s = Math.floor(s);
			if(s>1000){
				s=Math.round(s/1000*100)/100+'km';
			}else{
				s=s+'m';
			}
			return s;
		},
		clickShop(shopId) {
			uni.navigateTo({ url: 'shop?id='+shopId });			
		},
		changeSele(sele) {
			this.sele = sele;
			this.status = 'more';
			this.shopList = [];
			this.lower();
		}
	},
	onLoad() {
		uni.getLocation({ 
			type: 'wgs84',
			success: (res)=>{
				console.log(res);
				this.longitude=res.longitude;
				this.latitude=res.latitude;
				this.lower();
			}
		});
	}
}
</script>

<style>
.shoplist {
	height: 100vh;
	position: relative;
	background: #fbfbfb;
	font-size: 30upx;
	overflow: auto;
}
.shoplist .topNav {
	height: 80upx; 
	display: flex; 
	flex-direction: row; 
	justify-content: center; 
	align-items: center;
}

.shoplist .topNav .item {
	height: 60upx; 
	line-height: 60upx; 
	padding: 0 35upx;
	text-align: center;
	border: 1px solid #ef7738;
	color: #ef7738;
	font-size: 30upx;
}
.shoplist .topNav .item:first-child {
	border-radius: 30upx 0 0 30upx;
	border-right: none;
}
.shoplist .topNav .item:nth-child(3) {
	border-radius: 0 30upx 30upx 0;
	border-left: none;
}
.shoplist .topNav .active {
	background: #ef7738;
	color: #fff;
}


.shoplist .shopbox {
	width: 690upx; 
	/* height: 235upx; */
	box-sizing: border-box; 
	box-shadow: 0upx 3upx 10upx 0upx rgba(241, 243, 245, 0.54);
	border-radius: 30upx;
	background-color: #fff;
	margin: 15upx auto 0;
	padding: 30upx;
}
.shoplist .shopbox .topItem {
	width: 100%;
	height: 130upx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}
.shoplist .shopbox .topRight {
	width: 440upx;
	height: 115upx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;	
}
.shoplist .shopbox .topRightFlex {
	width: 100%;
	height: 35upx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;	
}
</style>
